<script lang="ts" setup>
import { storage } from "wxt/storage";
import 'element-plus/dist/index.css'
import { reactive } from 'vue'
const form = reactive({
  name: '110kV流沙站10kV流沙线abc #1塔 流沙公用台',
  before_operation: '',
  after_operation: '',
  has_high_voltage_circuit_breaker: 0,
  low_voltage_circuit_breaker:0,
  low_voltage_switch: 0,
  low_voltage_type:'',
})
const onSubmit = async () => {
    void localtransformername.setValue(form.name);
    void localtransformerbefore.setValue(form.before_operation);
    void localtransformerafter.setValue(form.after_operation);
    void localtransformercircuitbreaker.setValue(form.has_high_voltage_circuit_breaker);
    void localtransformerlowcircuitbreaker.setValue(form.low_voltage_circuit_breaker);
    void localtransformerswitch.setValue(form.low_voltage_switch);
    void localtransformertype.setValue(form.low_voltage_type);
    TransformerOutput(form.name,form.before_operation,form.after_operation,form.has_high_voltage_circuit_breaker,form.low_voltage_circuit_breaker,form.low_voltage_switch,form.low_voltage_type);
}
const onClean = () => {
    form.name='110kVXX站10kVXX线abc XX公用台';
    form.before_operation='';
    form.after_operation='';
    form.has_high_voltage_circuit_breaker='';
    form.low_voltage_circuit_breaker='';
    form.low_voltage_switch='';
    form.low_voltage_type='';
}
const onReload= async () => {
    form.name=await localtransformername.getValue();
    form.before_operation=await localtransformerbefore.getValue();
    form.after_operation=await localtransformerafter.getValue(form.after_operation);
    form.has_high_voltage_circuit_breaker=await localtransformercircuitbreaker.getValue();
    form.low_voltage_circuit_breaker=await localtransformerlowcircuitbreaker.getValue();
    form.low_voltage_switch=await localtransformerswitch.getValue();
    form.low_voltage_type=await localtransformertype.getValue();
}
const rules={
    name:[
        {required:true,pattern:/#[0-9]+\s*(杆|塔)/,message:'请输入杆塔号',trigger:'blur'}        //'/#[0-9]+\s*杆*塔*/'
    ],
}
</script>
<template>
    <el-form :model="form" :rules="rules" size="small" label-position="left" label-width="auto">
        <el-form-item label="设备名称：" prop="name">
            <el-input v-model="form.name"  placeholder="110kVXX站10kVXX线abc XX公用台" spellcheck="false"/>
        </el-form-item>
        <el-form-item label="操作前：">
            <el-select v-model="form.before_operation"   :teleported="false">
                <el-option label="运行" value="运行" />
                <el-option label="热备用" value="热备用" />
                <el-option label="冷备用" value="冷备用" />
                <el-option label="检修" value="检修" />
            </el-select>
        </el-form-item>
        <el-form-item label="操作后：">
            <el-select v-model="form.after_operation"   :teleported="false">
                <el-option label="运行" value="运行" />
                <el-option label="热备用" value="热备用" />
                <el-option label="冷备用" value="冷备用" />
                <el-option label="检修" value="检修" />
            </el-select>
        </el-form-item>
        <el-form-item label="低压设备类型：">
            <el-select v-model="form.low_voltage_type"   :teleported="false">
                <el-option label="柱上刀闸" value="柱上刀闸" />
                <el-option label="配电柜" value="配电柜" />
            </el-select>
        </el-form-item>
        <el-form-item label="低压刀闸数量：">
            <el-select v-model="form.low_voltage_circuit_breaker"   :teleported="false">
                <el-option label="0" value=0 />
                <el-option label="1" value=1 />
                <el-option label="2" value=2 />
                <el-option label="3" value=3 />
                <el-option label="4" value=4 />
            </el-select>
        </el-form-item>
        <el-form-item label="低压开关数量：">
            <el-select v-model="form.low_voltage_switch"   :teleported="false">
                <el-option label="0" value=0 />
                <el-option label="1" value=1 />
                <el-option label="2" value=2 />
                <el-option label="3" value=3 />
                <el-option label="4" value=4 />
            </el-select>
        </el-form-item>
        <el-form-item label="带高压刀闸 ">
            <el-switch v-model="form.has_high_voltage_circuit_breaker" active-value=1 inactive-value=0 />
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="onSubmit">生成操作票</el-button>
            <el-button type="danger" @click="onClean">清空参数</el-button>
            <el-button type="primary" @click="onReload">加载上次参数</el-button>
        </el-form-item>
    </el-form>
</template>
// const form = reactive({
//   name: '',
//   before_operation: '',
//   after_operation: '',
//   has_high_voltage_circuit_breaker: '',
//   low_voltage_circuit_breaker: '',
//   low_voltage_switch: '',
//   low_voltage_type:'',
// })
<style scoped>
</style>